<template>
  <chart :options="options" />
</template>
<script>
export default {
  name: "ChartBar",
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    legend: {
      type: Array,
      default: () => {
        return [];
      },
    },
    colors: {
      type: Array,
      default: () => {
        return null;
      },
    },
    text: {
      type: String,
      default: () => {
        return "";
      },
    },
    subtext: {
      type: String,
      default: () => {
        return "";
      },
    },
    roseType: {
      type: String,
      default: () => {
        return "";
      },
    },
    radius: {
      type: Array,
      default: () => {
        return [];
      },
    },
    labelLine: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    label: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    position: {
      type: String,
      default: () => {
        return "outside";
      },
    },
    left: {
      type: String,
      default: () => {
        return "left";
      },
    },
    top: {
      type: String,
      default: () => {
        return "middle";
      },
    },
    orient: {
      type: String,
      default: () => {
        return "vertical";
      },
    },
    subfontSize: {
      type: Number,
      default: 22
    },
    textfontSize:{
      type: Number,
      default: 22
    }
  },
  data() {
    return {};
  },
  computed: {
    options() {
      return {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: "30%",
          y: "38%",
          textStyle: {
            fontSize: this.subfontSize,
            fontFamily: "DINAlternate-Bold",
            fontWeight: "bold",
            color: "#fff",
            
          },
          subtextStyle: {
            fontSize: this.subfontSize,
            fontFamily: "DINAlternate-Bold",
            fontWeight: "bold",
            color: "#FFF",
            align: 'center',
            verticalAlign: 'middle',
            lineHeight: 30
          }
          
        },
        
        tooltip: {
          trigger: "item",
          borderColor: "rgba(255,255,255,.3)",
          backgroundColor: "rgba(13,5,30,.6)",
          borderWidth: 1,
          padding: 5,
          formatter: function (parms) {
            var str =
              parms.marker +
              "" +
              parms.data.name +
              "</br>" +
              
              parms.data.value +
              "："+
              parms.data.units +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          type: "scroll",
          orient: this.orient,
          left: this.left,
          align: "auto",
          top: this.top,
          textStyle: {
            color: "#B2CBFF",
          },
          data: this.legend,
        },
        color: this.colors,
        series: [
          {
            type: "pie",
            z: 3,
            center: ["40%", "50%"],
            radius: this.radius,
            clockwise: true,
            avoidLabelOverlap: true,
            roseType: this.roseType,
            hoverOffset: 15,
            label: {
               normal:{
                    show: this.label,
                    position: this.position,
                    formatter: "{b}：{d}%",
                    alignTo: 'labelLine',
                        position: 'outside',
                    padding: [50, -40],
                    textStyle: {
                        fontWeight: 400,
                        fontSize: 24, //文字的字体大小
                        color: "#fff",
                    },
               }
            },
            labelLine: {
              normal: {
                show: this.labelLine,
                lineStyle: {
                  color: "#365CFF",
                  width: 2,
                },
                length: 30
              },
            },
            data: this.data,
          },
        ],
      };
    },
  },
};
</script>